//------------------------------------------------------------------------------
// @description 管理员端-分数总览-进行中
//------------------------------------------------------------------------------
<script setup name="ScoreOverviewProceed">

//------------------------------------------------------------------------------
// 模块引入
//------------------------------------------------------------------------------
import { ref } from 'vue';
import { useRouter } from 'vue-router';

import { ElTable, ElTableColumn, ElPagination, ElSelect, ElOption } from 'element-plus';
import { Download, Search } from '@element-plus/icons-vue';

import service from '@/utils/request';
//------------------------------------------------------------------------------
// 数据存储
//------------------------------------------------------------------------------
const router = useRouter();


const totalData = ref({
    fine: 0,
    qualify: 0,
    notQualify: 0
}
)
const tableData = ref([])
const pageNum = ref(1); // 当前页码
const pageSize = ref(5); // 每页显示的条数
const totalSize = ref(0); // 总条数

//搜索框相关
const searchRef = ref(null);// 右侧搜索框元素
const searchValue = ref(''); // 搜索框的值


//------------------------------------------------------------------------------
// 数据处理方法
//------------------------------------------------------------------------------
const fiexedTableData = (data) => {
    if (data.length === 0) return [];
    return data.map((item) => {
        return {
            name: item.name,
            id: item.id,
            taskName: item.questionnaireName,
            taskState: item.questionnaireState,
            baseWorkName: item.basicWorkName,
            baseWorkState: item.basicWorkState,
            baseWorkScore: item.basicWorkScore,
            outstandingWorkName: item.prominentWorkName,
            outstandingWorkState: item.prominentWorkState,
            outstandingWorkScore: item.prominentWorkScore,
            totalScore: item.totalScore,
            assessResult: item.assessmentResult,
            operation: "详情",
        }
    })
}
//获取表格数据
const getTableData = (searchValue) => { 
    service({
        method: "get",
        url: "/admin/teacher/assessment/underway",
        headers: {
            Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiYWRtaW4iLCJ1c2VybmFtZSI6IjIwMDAyMDI0IiwiZXhwIjoxNzU4NDQwMTA1fQ.Uu-cvZv-qysNRnel-1TZSSsqfuh_fTuZGi04jXgO0_U',
        },
        params: {
            name: searchValue,
            pageNum: pageNum.value,
            pageSize: pageSize.value
        }
    }).then((res) => {
        tableData.value = fiexedTableData(res.data.data.pageResult.list);
        totalSize.value = res.data.data.pageResult.total;
        totalData.value.fine = res.data.data.excellentCount;
        totalData.value.qualify = res.data.data.qualifiedCount;
        totalData.value.notQualify = res.data.data.unqualifiedCount;
    })
}
getTableData("");

// 搜索框聚焦和失焦事件
const searchFocus = () => {
    searchRef.value.classList.add('searchActive');
};
const searchBlur = () => {
    if (searchValue.value === '') {
        searchRef.value.classList.remove('searchActive');
    }
}
const searchChange = () => {
    getTableData(searchValue.value);
}

const exportClick = () => {
    service({
        method: "get",
        url: '/admin/score/export',
        headers: {
            Authorization: localStorage.getItem('token'),
        },
        params: {
            years: "",
            state: "进行中",
            condition: searchValue.value
        },
        responseType: 'blob'
    }).then((res) => {
        const blob = new Blob([res.data]);
        const fileName = '分数导出(进行中).xlsx';
        const elink = document.createElement('a');
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
    })
}


//点击详情
const operationClick = (row, column) => {
    if (column.property !== 'operation') {
        return;
    }
    router.push({
        path: '/administrator/scoreOverview/proceed/detail',
        query: row
    });
}

//底部分页相关
const handleSizeChange = (val) => {
    pageNum.value = val
    getTableData(searchValue.value);
}
</script>

<template>
    <div class="scoreProgress">
        <!-- 总体数据 -->
        <div class="totalData">
            <div class="layout">
                <div class="content">
                    <div class="icon">
                        <span class="iconfont icon-youxiuxuesheng"></span>
                    </div>
                    <div class="text">
                        <div class="title">优秀人数</div>
                        <div>{{ totalData.fine }}</div>
                    </div>
                </div>
                <div class="content">
                    <div class="icon">
                        <span class="iconfont icon-buhuanhegebiaozhi"></span>
                    </div>
                    <div class="text">
                        <div class="title">合格人数</div>
                        <div>{{ totalData.qualify }}</div>
                    </div>
                </div>
                <div class="content">
                    <div class="icon">
                        <span class="iconfont icon-yewu_buhege"></span>
                    </div>
                    <div class="text">
                        <div class="title">不合格人数</div>
                        <div>{{ totalData.notQualify }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 数据表格 -->
        <div class="dataTable">
            <div class="tableHeader">
                <div class="left">
                    <span>{{ tableData.length > 0 ? tableData[0].taskName.substring(0, 9) : ''  }}学年突出工作情况</span>
                </div>
                <div class="right">
                    <div class="search" ref="searchRef">
                        <input 
                        v-model="searchValue" 
                        type="text" placeholder="搜索" 
                        @focus="searchFocus" 
                        @blur="searchBlur"
                        @keyup.enter="searchChange"
                        />
                        <el-icon class="icon"><Search /></el-icon>
                    </div>
                    <div class="export" @click="exportClick">
                        <span>导出</span>
                        <el-icon :size="18"><Download /></el-icon>
                    </div>
                </div>
            </div>
            <div class="tableContent">
                <el-table 
                :data="tableData"
                :style="{width: '100%'}"
                height="100%"
                show-overflow-tooltip
                empty-text="暂无数据"
                :header-row-style="{ color: '#000'}"
                @cell-click="operationClick"
                >
                    <el-table-column align="left" prop="name" label="姓名" width="100"></el-table-column>
                    <el-table-column align="center" prop="id" label="工号" width="100"></el-table-column>
                    <el-table-column align="center" prop="taskName" label="考核名称" width="250"></el-table-column>
                    <el-table-column align="center" prop="taskState" label="任务状态">
                        <template #default="scope">
                            <span :statusColor="scope.row.taskState">{{ scope.row.taskState }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="baseWorkScore" label="基本工作得分" width="110"></el-table-column>
                    <el-table-column align="center" prop="outstandingWorkScore" label="突出工作得分" width="110"></el-table-column>
                    <el-table-column align="center" prop="totalScore" label="总得分"></el-table-column>
                    <el-table-column align="center" prop="assessResult" label="考核结果">
                        <template #default="scope">
                            <span :resultColor="scope.row.assessResult">{{ scope.row.assessResult }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="operation" label="操作" fixed="right">
                        <template #default="scope">
                            <span style="color:#5a8cff;">{{ scope.row.operation }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="tableFooter">
                <div class="left">
                    <div class="total">共计: {{ totalSize}} 条</div>
                </div>
                <div class="right">
                    <div class="pagination">
                        <el-pagination
                            layout="prev, pager, next"
                            :total="totalSize"
                            :page-size="pageSize"
                            background
                            size="small"
                            @current-change="handleSizeChange"
                        />                        
                    </div>
                    <div class="selector">
                        <el-select 
                        v-model="pageSize" 
                        placeholder="每页条数" 
                        style="width: 80px;" 
                        size="small"
                        @change="getTableData(searchValue);"
                        >
                            <el-option label="5条/页" :value="5" selected></el-option>
                            <el-option label="10条/页" :value="10"></el-option>
                            <el-option label="20条/页" :value="20"></el-option>
                        </el-select>
                    </div>
                    <div class="jump">
                        <span class="title">前往:</span>
                        <input type="text" v-model="pageNum" @change="getTableData(searchValue);">
                    </div>                        
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
@use ".././fonticon/ScoreOverview/iconfont.css";
.scoreProgress{
    width: 100%;
    height: calc(100% - 7.5vh);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 500;
    .totalData{
        width: 90%;
        height: 15%;
        margin-top: 20px;
        background-color: #fff;
        display: flex;
        align-items: center;
        .layout{
            width: 100%;
            height: 70%;
            display: flex;
            .content{
                flex:1;
                border-right: 1px solid #ececed;
                display: flex;
                align-items: center;
                .icon{
                    width: 30px;
                    height: 30px;
                    margin-left: 20px;
                    margin-right: 10px;
                    text-align: center;
                    line-height: 30px;
                    border-radius: 50%;
                    background-color: #e8f3ff;
                    color:#165DFF;
                }
                .text{
                    .title{
                        font-size: 12px;
                    }
                }
            }
        }
    }
    .dataTable{
        width: 90%;
        height: 70%;
        margin-top: 20px;
        background-color: white;
        .tableHeader{
            width: 100%;
            height: 10%;
            display: flex;
            justify-content: space-between;
            font-weight: 600;
            .left {
                width: 250px;
                padding-left: 15px;
                display: flex;
                align-self: center;
            }
            .right{
                width: calc(100% - 250px);
                height: 100%;
                padding-right: 15px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap:15px;
                .search {
                    width: 20vw;
                    height: 4vh;
                    display: flex;
                    align-items: center;
                    border-radius: 6px;
                    background-color: #f1f2f3;
                    transition: transform 0.2s ease-in-out; 
                    &:hover{
                        background-color: #e0e1e2;
                    }
                    input{
                        height: 100%;
                        width: 90%;
                        outline: none;
                        border: none;
                        background-color: transparent;
                        text-indent: 1em;
                    }
                    .icon{
                        width: 10%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                    }
                }
                .searchActive{
                    transform: translateX(-20vw) scale(1.1);
                    width: 20vw;
                    border: 2px solid #4c5fbc;
                    background-color: #ffffff!important;
                }
                .export{
                    width: 80px;
                    height: 70%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap:10px;
                    border-radius: 5px;
                    background-color: #165dff;
                    font-weight: 500;
                    font-size: 14px;
                    color:white;
                }
            }
        }
        .tableContent{
            width: 100%;
            height: 80%;
            padding: 0 15px;
            font-weight: 500;
            [statusColor="已完成"]{
                color: #4bc65f;
            }
            [statusColor="进行中"]{
                color:#b9b9b9;
            }
            [resultColor="优秀"]{
                color: #697ac7;
            }
            [resultColor="合格"]{
                color: #4bc65f;
            }
            [resultColor="不合格"]{
                color: #ff0000;
            }
        }
        .tableFooter {
                width: 100%;
                height: 10%;
                padding: 0 15px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .left{
                    font-size: 12px;
                }
                .right{
                    display: flex;
                    gap:15px;
                    .jump{
                        .title{
                            margin-right: 5px;
                            font-size: 12px;
                        }
                        input{
                            width: 25px;
                            height: 25px;
                            text-align: center;
                            line-height: 25px;
                            border: none;
                            outline: none;
                            border-radius: 5px;
                            background-color: #f2f3f5;
                            color:#86909c;
                            &:focus{
                                border: 1px solid #165dff;
                            }
                        }
                    }
                }
        }
    }
}
</style>